<template>
    <div>
        <!-- 基本数据 -->
        <div>
            <el-card style="height: 1100px" class="card">
                <div slot="header">
                    <span>基本数据</span>
                </div>
                <!-- 基本数据 -->
                <el-row class="welldataform">
                    <div class="headstyle">井眼基本数据</div>
                    <el-form ref="wellData" :model="wellData" label-width="110px">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="油田">
                                    <template>
                                        <el-select v-model="wellData.oilfield" clearable placeholder="请选择油田" style="width: 100%">
                                            <el-option
                                                v-for="item in OilfieldOptions"
                                                :key="item"
                                                :label="item"
                                                :value="item"
                                                :disabled="item.disabled"
                                            >
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="井名">
                                    <el-input v-model="wellData.wellname"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="区块名称">
                                    <template>
                                        <el-select v-model="wellData.block" clearable placeholder="请选择区块名称" style="width: 100%">
                                            <el-option
                                                v-for="item in BlockOptions"
                                                :key="item"
                                                :label="item"
                                                :value="item"
                                                :disabled="item.disabled"
                                            >
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="项目建设单位">
                                    <template>
                                        <el-select
                                            v-model="wellData.department"
                                            clearable
                                            placeholder="请选择项目建设单位"
                                            style="width: 100%"
                                        >
                                            <el-option
                                                v-for="item in departmentOptions"
                                                :key="item"
                                                :label="item"
                                                :value="item"
                                                :disabled="item.disabled"
                                            >
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="井别">
                                    <template>
                                        <el-select v-model="wellData.wellcategory" clearable placeholder="请选择井别" style="width: 100%">
                                            <el-option
                                                v-for="item in wellcategoryOptions"
                                                :key="item"
                                                :label="item"
                                                :value="item"
                                                :disabled="item.disabled"
                                            >
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="井型">
                                    <template>
                                        <el-select v-model="wellData.welltype" clearable placeholder="请选择井型" style="width: 100%">
                                            <el-option
                                                v-for="item in welltypeOptions"
                                                :key="item"
                                                :label="item"
                                                :value="item"
                                                :disabled="item.disabled"
                                            >
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="油藏类型">
                                    <template>
                                        <el-select
                                            v-model="wellData.reservoirtype"
                                            clearable
                                            placeholder="请选择油藏类型"
                                            style="width: 100%"
                                        >
                                            <el-option
                                                v-for="item in ReservoirTypeOptions"
                                                :key="item"
                                                :label="item"
                                                :value="item"
                                                :disabled="item.disabled"
                                            >
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="目的层名称">
                                    <el-input v-model="wellData.objectposition"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="设计井深m">
                                    <el-input v-model="wellData.welldepth1"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="开钻日期">
                                    <el-date-picker
                                        v-model="wellData.startdrilldate"
                                        type="date"
                                        align="right"
                                        value-format="yyyy-MM-dd"
                                        style="width: 100%"
                                        placeholder="开钻日期"
                                    >
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="搬安日期">
                                    <el-date-picker
                                        v-model="wellData.enddrilldate"
                                        type="date"
                                        align="right"
                                        value-format="yyyy-MM-dd"
                                        style="width: 100%"
                                        placeholder="搬安日期"
                                    >
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="钻探公司">
                                    <template>
                                        <el-select
                                            v-model="wellData.drillcompany"
                                            clearable
                                            placeholder="请选择钻探公司"
                                            style="width: 100%"
                                        >
                                            <el-option
                                                v-for="item in DrillCompanyOptions"
                                                :key="item"
                                                :label="item"
                                                :value="item"
                                                :disabled="item.disabled"
                                            >
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="钻井公司">
                                    <template>
                                        <el-select
                                            v-model="wellData.drillwellcompany"
                                            clearable
                                            placeholder="请选择钻井公司"
                                            style="width: 100%"
                                        >
                                            <el-option
                                                v-for="item in DrillWellCompanyOptions"
                                                :key="item"
                                                :label="item"
                                                :value="item"
                                                :disabled="item.disabled"
                                            >
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="井队">
                                    <el-input v-model="wellData.drillteam"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="井身结构钻头程序">
                                    <el-input type="textarea" v-model="wellData.wellstructure"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="井身结构套管程序">
                                    <el-input type="textarea" v-model="wellData.caseprog"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6" :offset="18">
                                <el-form-item>
                                    <el-button type="primary" @click="onSave">保存</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-row>
                <!-- 井身结构 -->
                <div class="wellStructure">
                    <div class="headstyle">井身结构</div>
                    <div class="inputstyle">
                        <div>
                            <el-button type="success" @click="CreatewellStructure">新建</el-button>
                        </div>
                        <!-- <el-button type="success" @click="onSave">导入</el-button> -->
                        <!-- excel导入 -->
                        <div style="margin-left: 10px">
                            <el-upload class="upload-demo" :http-request="ImportwellStructure" :show-file-list="false" action="">
                                <el-button type="success">导入</el-button>
                            </el-upload>
                        </div>
                        <!-- 下载模板 -->
                        <div style="margin-left: 10px">
                            <el-button type="primary" @click="DownLoadModel">模板下载</el-button>
                        </div>
                    </div>
                    <el-table
                        :data="tableData"
                        border
                        style="width: 100%; font-size: 10px"
                        :max-height="tableHeight"
                        :header-row-style="rowStyle"
                        :header-cell-style="cellStyle"
                        :row-style="rowStyle"
                        :cell-style="cellStyle"
                        stripe
                    >
                        <el-table-column label="操作" width="210">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                <el-button type="success" size="mini" @click="handleImport(scope.$index, scope.row)">录入</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="no" label="开钻次序" />
                        <el-table-column align="center" prop="welldepth" label="井深(m)" />
                        <el-table-column align="center" prop="bitsize" label="钻头尺寸(mm)" />
                        <el-table-column align="center" prop="casesize" label="套管尺寸(mm)" />
                        <el-table-column align="center" prop="caseprog" label="套管程序" />
                        <el-table-column align="center" prop="position" label="套管下入层位" />
                        <el-table-column align="center" prop="welldepth1" label="套管上部深度(m)" />
                        <el-table-column align="center" prop="welldepth2" label="套管下部深度(m)" />
                        <el-table-column align="center" prop="returndepth" label="水泥返高(m)" />
                    </el-table>
                </div>
                <!-- 显示页数 -->
                <div class="pagination">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="pageIdx"
                        :page-size="pageSizes"
                        :total="totalData"
                        @current-change="handlePageChange"
                    ></el-pagination>
                </div>
                <!-- 井身结构--编辑弹出框 -->
                <el-dialog title="井身数据修改" :visible.sync="editVisible" width="60%">
                    <el-form :model="form" ref="form" label-width="150px">
                        <el-col :span="12">
                            <el-form-item label="开钻次序">
                                <!-- <el-input v-model="form.no"></el-input> -->
                                <template>
                                    <el-select v-model="form.no" clearable placeholder="请选择开钻次序" style="width: 100%">
                                        <el-option
                                            v-for="item in NoOptions"
                                            :key="item"
                                            :label="item"
                                            :value="item"
                                            :disabled="item.disabled"
                                        >
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="井深(m)">
                                <!-- <el-input v-model="form.welldepth"></el-input> -->
                                <template>
                                    <el-input v-model="form.welldepth"></el-input>
                                </template>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="钻头尺寸(mm)">
                                <!-- <el-input v-model="form.bitsize"></el-input> -->
                                <template>
                                    <el-select v-model="form.bitsize" clearable placeholder="请选择钻头尺寸" style="width: 100%">
                                        <el-option
                                            v-for="item in BitSizeOptions"
                                            :key="item"
                                            :label="item"
                                            :value="item"
                                            :disabled="item.disabled"
                                        >
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="套管尺寸(mm)">
                                <!-- <el-input v-model="form.casesize"></el-input> -->
                                <template>
                                    <el-select v-model="form.casesize" clearable placeholder="请选择套管尺寸" style="width: 100%">
                                        <el-option
                                            v-for="item in CaseSizeOptions"
                                            :key="item"
                                            :label="item"
                                            :value="item"
                                            :disabled="item.disabled"
                                        >
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="套管程序">
                                <el-input v-model="form.caseprog"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="套管下入层位">
                                <el-input v-model="form.position"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="套管上部深度(m)">
                                <el-input v-model="form.welldepth1"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="套管下部深度(m)">
                                <el-input v-model="form.welldepth2"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="水泥返高(m)">
                                <el-input v-model="form.returndepth"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="editVisible = false">取 消</el-button>
                        <el-button type="primary" @click="saveEdit" v-if="isNewData">确 定</el-button>
                        <el-button type="primary" @click="saveEdit" v-else>确 定</el-button>
                    </span>
                </el-dialog>
            </el-card>
        </div>
    </div>
</template>

<script>
import {
    FindWellStructureByCondition,
    EditWellStructure,
    DeleteWellStructure,
    AddWellStructure
} from '../../../api/module/dataClassification/basicData/well_structure';
import { GetWellById, EditOneWell } from '../../../api/module/dataClassification/basicData/well';
import { importExcel, downTemplateExcel } from '../../../api/module/dataClassification/excel';
import { ListDataDictByCondition } from '../../../api/module/dataClassification/data_classification';
export default {
    data() {
        return {
            //下拉字典
            OilfieldOptions: [],
            BlockOptions: [],
            departmentOptions: [],
            ReservoirTypeOptions: [],
            DrillCompanyOptions: [],
            DrillWellCompanyOptions: [],
            wellcategoryOptions: [],
            welltypeOptions: [],
            NoOptions: [],
            WellDepthOptions: [],
            BitSizeOptions: [],
            CaseSizeOptions: [],

            tableData: [], //井身结构数据信息
            wellData: {}, // 井眼基本数据信息
            wellid: localStorage.getItem('wellid'), //this.$route.query.wellid,
            //查询行的数据
            searchModel: {
                //查询部分默认的绑定值
                wellname: localStorage.getItem('wellname'), //this.$route.query.wellname, //井名
                welltype: '', //井型
                wellcategory: '', //井别
                startdrilldate: '', //开钻日期
                enddrilldate: '', //完钻日期
                current: 1, //当前页
                limit: 10 //页大小
            },
            //分页导航
            pageIdx: 1,
            pageSizes: 10,
            totalData: 0,
            //table展示数据（样式）
            tableHeight: localStorage.getItem('tableHeight'),
            rowStyle: { height: '30px' },
            cellStyle: {
                padding: 0
            },
            form: {
                bitsize: '',
                caseprog: '',
                casesize: '',
                no: '',
                position: '',
                returndepth: '',
                welldepth: null,
                welldepth1: null,
                welldepth2: null,
                wellname: localStorage.getItem('wellname'),
                wellstructureid: null
            },
            editVisible: false,
            isNewData: false
        };
    },
    created() {
        this.FindWellStructureByCondition();
        this.GetWellById();
        this.ListDataDictByConditionWellClasses();
    },
    mounted() {},
    methods: {
        //获取井型下拉列表
        ListDataDictByConditionWellClasses() {
            ListDataDictByCondition('油田').then((res) => {
                this.OilfieldOptions = res.data;
            }),
                ListDataDictByCondition('区块').then((res) => {
                    this.BlockOptions = res.data;
                }),
                ListDataDictByCondition('项目建设单位').then((res) => {
                    this.departmentOptions = res.data;
                }),
                ListDataDictByCondition('油藏类型').then((res) => {
                    this.ReservoirTypeOptions = res.data;
                }),
                ListDataDictByCondition('钻探公司').then((res) => {
                    this.DrillCompanyOptions = res.data;
                }),
                ListDataDictByCondition('钻井公司').then((res) => {
                    this.DrillWellCompanyOptions = res.data;
                }),
                ListDataDictByCondition('开钻次序').then((res) => {
                    this.NoOptions = res.data;
                }),
                ListDataDictByCondition('井深').then((res) => {
                    this.WellDepthOptions = res.data;
                }),
                ListDataDictByCondition('钻头尺寸').then((res) => {
                    this.BitSizeOptions = res.data;
                }),
                ListDataDictByCondition('套管尺寸').then((res) => {
                    this.CaseSizeOptions = res.data;
                }),
                ListDataDictByCondition('井别').then((res) => {
                    this.wellcategoryOptions = res.data;
                }),
                ListDataDictByCondition('井型').then((res) => {
                    this.welltypeOptions = res.data;
                });
        },
        //通过井眼id进行查询信息
        GetWellById() {
            GetWellById(this.wellid).then((res) => {
                this.wellData = res.data;
            });
        },
        //修改井眼数据
        EditOneWell() {
            EditOneWell(this.wellData).then((res) => {
                console.log(res);
                this.$message.success('井眼基本数据修改成功！');
            });
        },
        //修改数据--井身结构
        EditWellStructure() {
            EditWellStructure(this.form).then((res) => {
                console.log(res);
                this.$message.success('井身结构数据编辑成功！');
            });
        },
        //新增数据--井身结构
        AddWellStructure() {
            AddWellStructure(this.form).then((res) => {
                console.log(res);
                this.$message.success('井身结构数据新增成功！');
                //查询数据
                this.FindWellStructureByCondition();
            });
        },
        //删除数据--井身结构
        DeleteWellStructure(id) {
            DeleteWellStructure(id).then((res) => {
                console.log(res);
                this.$message.success('井身结构数据删除成功！');
            });
        },
        //查询井身结构数据
        FindWellStructureByCondition() {
            FindWellStructureByCondition(this.searchModel)
                .then((res) => {
                    this.tableData = res.data.records;
                    //对象数组排序
                    this.tableData.sort((a,b)=>{
                        return a.welldepth2 - b.welldepth2
                    })
                    
                    this.totalData = res.data.total;
                })
                .catch((err) => {
                    this.$message.error('查询出错，请刷新！');
                });
        },
        //点击具体行数据--编辑
        handleEdit(index, row) {
            this.editVisible = true;
            this.isNewData = false;
            this.form = row;
        },
        //点击具体行数据--新增
        CreatewellStructure() {
            this.editVisible = true;
            this.isNewData = true;
            this.form = {
                bitsize: '',
                caseprog: '',
                casesize: '',
                no: '',
                position: '',
                returndepth: '',
                welldepth: null,
                welldepth1: null,
                welldepth2: null,
                wellname: localStorage.getItem('wellname'),
                wellstructureid: null
            };
        },
        //点击具体行数据--保存数据
        saveEdit() {
            this.editVisible = false;
            if (this.isNewData) {
                //新增数据保存
                this.AddWellStructure();
                this.FindWellStructureByCondition();
            } else {
                //修改数据保存
                this.EditWellStructure();
            }
        },
        //点击具体行数据--删除
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    // this.$message.success('删除成功')
                    this.tableData.splice(index, 1);
                    //删除数据库数据操作
                    this.DeleteWellStructure(row.wellstructureid);
                })
                .catch(() => {});
        },
        //点击具体行数据--导入
        handleImport(index, row) {
            //进行路径的跳转
            // localStorage.setItem('wellid', row.wellid)
            localStorage.setItem('wellname', row.wellname); // 包名
            localStorage.setItem('no', row.no); // 开钻次序
            localStorage.setItem('bitsize', row.bitsize); // 钻头尺寸
            localStorage.setItem('casesize', row.casesize); // 套管尺寸
            localStorage.setItem('caseprog', row.caseprog); // 套管程序
            localStorage.setItem('wellstructureid', row.wellstructureid); // 套管程序
            let path = '/BasicData';
            this.$router.push({
                path: path,
                query: {}
            });
        },
        //分页导航
        handlePageChange(page) {
            this.pageIdx = page;
            this.searchModel.current = page;
            this.FindWellStructureByCondition();
        },
        //excel导入
        ImportwellStructure(item) {
            const loading = this.$loading({
                lock: true,
                text: '数据导入中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            const formData = new FormData();
            formData.append('file', item.file);
            importExcel(formData, 'WellStructure')
                .then((res) => {
                    console.log('excel导入...');
                    console.log(res);
                    this.$message.success("数据导入成功")
                    this.FindWellStructureByCondition();
                    loading.close()
                })
                .catch((err) => {
                    console.log(err);
                    loading.close()
                });
        },
        onSave() {
            this.EditOneWell();
        },
        //下载模板--井身结构
        DownLoadModel() {
            //下载excel模板
            downTemplateExcel('WellStructure').then((res) => {
                console.log(res);
                if (!res) {
                    return;
                }
                const link = document.createElement('a');
                let blob = new Blob([res]);
                link.style.display = 'none';
                link.href = URL.createObjectURL(blob);
                link.setAttribute('download', '井身结构WellStructure.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        }
    }
};
</script>

<style scoped>
.card >>> .el-card__body {
    padding: 5px;
}
.card >>> .el-card__header {
    font-size: 17px;
    padding: 5px 10px;
    /* padding: 5px 10px !important; */
    height: 40px;
    line-height: 30px;
    background-color: #eef0f6;
}
.welldataform {
    width: 97%;
    margin-left: 20px;
    margin-top: 20px;
}
.el-form-item__label {
    font-size: 12px;
}
.wellStructure {
    width: 97%;
    margin-left: 20px;
    margin-top: 10px;
}
form {
    margin-top: 10px;
}
.headstyle {
    height: 25px;
    font-size: 14px;
    padding: 5px 10px;
    background-color: hsl(225, 39%, 48%);
    color: white;
}
.inputstyle {
    margin-left: 13px;
    
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.upload-demo >>> .el-upload--text {
    width: 57px;
    height: 50px;
    border-radius: 0px;
    border: none;
    display: flex;
    align-items: center;
}
/* .upload-demo >>> .uploadbtn{
     background: #fff;
    color: #3C56C6;
    border: none;
    border-radius: 0;
    position: absolute;
    bottom: -5px;
    right: -90px;
    pointer-events: auto; 
    text-decoration: underline;
} */

/* .upload-demo{
     display: flex;
    align-items: center;
    flex-direction: row;
    justify-content:center;
}
.upload-demo:first-child{
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content:center;
}  */
/* .importDiv{
    display: flex;
    align-items: center;
} */
/* .upload-demo button {
    margin-top: 15px;
} */
</style>